import React, { useEffect, useState } from 'react';
import type { ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import {
  Switch,
  Space,
  Tag,
  Table,
  LightFilter,
  ProFormDatePicker,
  Button,
} from 'antd';
import { useRef } from 'react';
import { connect, history } from 'umi';
import { AudioOutlined } from '@ant-design/icons';

function TableMAX(props: any) {
  const actionRef = useRef<ActionType>();
  // const [data, setarr] = useState([]);
  const columns: any = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: 'ID',
      dataIndex: 'id',
      ellipsis: true,
      tip: '标题过长会自动收缩',
      search: false,
    },
    {
      title: '楼盘名称',
      dataIndex: 'estate_name',
      ellipsis: true,
      tip: '标题过长会自动收缩',
      search: false,
    },
    {
      title: '标题',
      dataIndex: 'title',
      ellipsis: true,
      tip: '标题过长会自动收缩',
      search: false,
    },
    {
      title: '面积',
      dataIndex: 'acreage',
      ellipsis: true,
      tip: '标题过长会自动收缩',
      search: false,
      render: (_: any, item: any) => {
        return <span>{item.price}㎡</span>;
      },
    },
    {
      title: '总价',
      dataIndex: 'price',
      ellipsis: true,
      search: false,
      //tip: '标题过长会自动收缩',
      //search: false,
      render: (_: any, item: any) => {
        return <span>{item.price}万</span>;
      },
    },
    // {
    //   title: '排序',
    //   dataIndex: 'estate_name',
    //   ellipsis: true,
    //   tip: '标题过长会自动收缩',
    //   search: false,
    // },
    {
      disable: true,
      title: '状态',
      dataIndex: 'status',
      filters: true,
      onFilter: true,
      ellipsis: true,
      valueType: 'select',

      valueEnum: {
        all: { text: '所有' },
        closed: {
          text: '正常',
          status: 'Success',
          // disabled: true,
        },
        processing: {
          text: '待审',
          status: 'Processing',
        },
      },
      render: (_: any, item: any) => {
        return item.status === 1 ? (
          <Switch
            defaultChecked={true}
            checkedChildren="正常"
            unCheckedChildren="关闭"
            onChange={(checked: any) => {}}
          />
        ) : (
          <Switch
            defaultChecked={false}
            checkedChildren="正常"
            unCheckedChildren="关闭"
            onChange={(checked: any) => {}}
          />
        );
      },
    },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (_: any, item: any) => {
        return (
          <React.Fragment>
            <Space size={[0, 8]} wrap>
              <Tag
                color="#009688"
                onClick={() => {
                  history.push('/homes/commerce/Office/edit/' + item.id, {
                    state: item,
                  });
                }}
              >
                编辑
              </Tag>
              <Tag
                color="#FF5722"
                onClick={() => {
                  props.dispatch({
                    type: 'officeModel/DEL_List',
                    payload: item,
                  });
                }}
              >
                删除
              </Tag>
            </Space>
          </React.Fragment>
        );
      },
    },
  ];

  return (
    <div>
      <ProTable
        columns={columns}
        toolbar={{
          search: {
            onSearch: (value: string) => {
              // console.log('====================================');
              // console.log(value);
              // console.log('====================================');
              props.dispatch({
                type: 'officeModel/search_list',
                payload: value,
              });
            },
          },
          // filter: (
          //   <LightFilter>
          //     <ProFormDatePicker name="startdate" label="响应日期" />
          //   </LightFilter>
          // ),
          // actions: [
          //   <Button
          //     key="primary"
          //     type="primary"
          //     onClick={() => {
          //       alert('add');
          //     }}
          //   >
          //     添加
          //   </Button>,
          // ],
        }}
        rowSelection={{
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}
        actionRef={actionRef}
        cardBordered
        dataSource={props.state}
        editable={{
          type: 'multiple',
        }}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
          onChange(value) {
            console.log('value: ', value);
          },
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        pagination={{
          pageSize: 5,
          onChange: (page) => console.log(page),
        }}
        dateFormatter="string"
      />
    </div>
  );
}
const mapStateToProps = (state: any) => {
  return {};
};
export default connect(mapStateToProps)(TableMAX);
